import React from 'react';
import ExitToApp from '@material-ui/icons/ExitToApp';
import ChromeReaderModeOutlined from '@material-ui/icons/ChromeReaderModeOutlined';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { BtIcon, side_width, Img } from '../../nui';
import PermIdentity from '@material-ui/icons/PermIdentity';
import { loc } from '../../local';

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
    },
    appBar: {
        zIndex: theme.zIndex.drawer + 1,
    },
    appBarBlack: {
        zIndex: theme.zIndex.drawer + 1,
        backgroundColor: "#2c2c2c",
    },
    drawer: {
        width: side_width,
        flexShrink: 0,
    },
    drawerPaper: {
        width: side_width,
    },
    drawerHide: {
        width: 0,
    },
    drawerPaperHide: {
        width: 0,
    },
    drawerContainer: {
        overflow: 'auto',
    },
    content: {
        flexGrow: 1,
    },
}));

// size: dense,
const LayFrame = ({ sideopen, setOpen, view, title, hlogout, line, ver, children, tool=null, size="regular",
    log=null, huser=null, luser="", cl="normal", head="h6" }) => {
    const classes = useStyles();

    const hside = () => {
        const ret = !sideopen;
        setOpen(ret);
    };

    const getLog = () => {
        if (!log) {
            return null;
        }

        return <Img src={`image/${log}.png`} className="h-8 mr-4"/>;
    };

    const getUser = () => {
        if (!huser) {
            return null;
        }

        return <BtIcon id="user" hcmd={huser} icon={<PermIdentity style={{ color: "white" }}/>} title={luser}/>;
    };

    const getLogout = () => {
        if (!hlogout) {
            return null;
        }

        return <BtIcon id="logout" hcmd={hlogout} icon={<ExitToApp style={{ color: "white" }}/>} title={loc("tc")}>{loc("tc")}</BtIcon>;
    };

    const getOpen = () => {
        if (!setOpen) {
            return null;
        }

        return <BtIcon id="side" hcmd={hside} icon={<ChromeReaderModeOutlined style={{ color: "white" }}/>} title={loc("show")}/>;
    };

    const getSt = () => {
        if (cl === "black") {
            return classes.appBarBlack;
        }

        return classes.appBar;
    };

    return (
        <div className={classes.root}>
            <CssBaseline />
            <AppBar position="fixed" className={getSt()}>
                <Toolbar variant={size}>
                    {getLog()}
                    <Typography variant={head} noWrap>
                        {title}
                        <span className="ml-2 text-sm">{ver}</span>
                        <span className="ml-10">{line}</span>
                    </Typography>
                    <div className="inline-flex ml-auto min-180 items-center">
                        {tool}
                        {getUser()}
                        {getOpen()}
                        {getLogout()}
                    </div>
                </Toolbar>
            </AppBar>
            <Drawer open={sideopen}
                className={sideopen ? classes.drawer : classes.drawerHide}
                variant={sideopen ? "permanent" : "persistent"}
                classes={{ paper: sideopen ? classes.drawerPaper : classes.drawerPaperHide }}>
                <Toolbar />
                <div className={classes.drawerContainer}>
                    {children}
                </div>
            </Drawer>
            <main className={classes.content}>
                <Toolbar />
                {view()}
            </main>
        </div>
    );
};

export {LayFrame};
